<template>
    <span>
        <el-popover
                placement="bottom-start"
                width="200"
                trigger="hover">
            <img src="../../assets/img/qq.png" alt="" style="height: 200px;width: 200px">
            <img src="../../assets/img/qq.svg" alt="" slot="reference">
        </el-popover>
        <el-popover
                placement="bottom"
                width="200"
                trigger="hover">
            <img src="../../assets/img/weixin.png" alt="" style="height: 200px;width: 200px">
            <img src="../../assets/img/wechat.svg" alt="" slot="reference">
        </el-popover>
        <el-popover
                placement="bottom"
                width="200"
                trigger="hover"
                content="https://gitee.com/kartoffel-chen">
            <img src="../../assets/img/gitee.svg" alt="" slot="reference">
        </el-popover>
        <el-popover
                placement="bottom-end"
                width="200"
                trigger="hover"
                content="https://github.com/Kartoffel-chen">
            <img src="../../assets/img/github.svg" alt="" slot="reference">
        </el-popover>
    </span>
</template>

<script>
    export default {
        name: "MyApp",
        props:['url'],
    }
</script>

<style scoped>
    img {
        margin: 0px 10px;
        height: 30px;
        width: 30px;
    }
</style>